<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>信用卡直通车</title>
		<link href="../public/css/loan/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../public/css/loan/card.css" />
		<link rel="stylesheet" href="../public/css/loaders.min.css" />
	</head>

	<body>
		<div class="mui-content" id="app">
			<!--顶部图片-->
			<div class="top-bg">
				<img src="../public/image/xyk/banner1@2x.png" />
			</div>
			<!--热门银行-->
			<div class="hot-bank">
				<div class="hot-bank-title">
					<span class="line"></span>
					<span class="hot-bank-title-text">热门银行</span>
				</div>
				<div class="bank-list">
					<div class="mui-slider">
						<div id="Gallery" class="mui-slider-group">
							<div class="mui-slider-item">
								<ul class="mui-table-view mui-grid-view mui-grid-9">
									<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
									</li>
								</ul>
							</div>
						</div>
						<div id="dian" class="mui-slider-indicator">
						</div>
					</div>
				</div>
				<div class="hot-bank-title">
					<span class="line"></span>
					<span class="hot-bank-title-text">热门推荐</span>
				</div>
			</div>
			<div v-for="item in cards">
				<div class="mui-card">
					<div class="mui-card-header">
						<div class="hot-bank-left">
							<span class="hot-bank-name" v-html="item.cardBankName"></span>
							<span class="hot-bank-desc" v-html="item.cardDesc"></span>
						</div>
						<div class="hot-bank-right">
							<button class="hot-bank-btn mui-btn-blue" style="padding: 1px 3px; font-size: 12px;background-color: #007AFF;color: white;border: none; margin-top: 10%;width: 70px;" @click="open(item.cardUrl,item.cardId)" :data-id="item.cardUrl" :type="item.cardId" >免费申请</button>
						</div>
					</div>
					<div class="mui-card-content">
						<div class="mui-card-content-inner">
							<ul>
								<li v-for="dis in item.cardDiscount" v-html="dis"></li>
								<!--<li>赠送百万出行意外险</li>-->
								<!--<li>新品7折优惠</li>-->
							</ul>
							<img v-bind:src="item.cardBanner" style="width: " />
						</div>
					</div>
				</div>
			</div>
			<div style="height: 40px;width: 100%;text-align: center;line-height: 40px">
				<a href="remake.html" style="text-decoration: none;color: #9d9d9d;font-size: 14px">办卡须知</a>
			</div>
			<!--<div style="text-align: center;">-->
				<!--<span style="float: left;position: absolute;top: 0px ;left: 0px;display: block;width: 100%;">{{loadTips}}</span>-->
				<!--<div v-show="loading" class="loader" style="position: absolute;top: 0px;left: 0px;width: 100%;">-->
					<!--<div class="loader-inner ball-beat">-->
						<!--<div></div>-->
						<!--<div></div>-->
						<!--<div></div>-->
					<!--</div>-->
				<!--</div>-->
			<!--</div>-->
		</div>
		<script src="../public/js/jquery.min.js"></script>
		<script src="../public/js/vue.min.js"></script>
		<script src="../public/js/loan/card.js"></script>
		<script src="../public/js/loan/mui.min.js"></script>
		<!--<script type="text/javascript" charset="utf-8">-->
            <!--mui.init();-->
		<!--</script>-->
	</body>

</html>